<template>
  <div class="domainlist">
    <el-tabs v-model="formData.appitemId" tab-position="left" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.id" v-for="(item, index) in tabsList" :key="item.id">
        <div class="searchbox">
          <el-input placeholder="请输入要搜索的域名" v-model="formData.domainName" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchDomain"></el-button>
          </el-input>
        </div>
        <div class="listdata">
          <el-table :data="domainListData" border style="width: 100%; margin-bottom: 20px">
            <el-table-column prop="domainName" label="域名"> </el-table-column>
            <el-table-column prop="platName" label="平台名称"> </el-table-column>
            <el-table-column prop="templateName" label="模板名称"> </el-table-column>
            <el-table-column prop="templateVersion" label="模板版本号"> </el-table-column>
            <el-table-column prop="releaseUpdateName" label="发布人"> </el-table-column>
            <el-table-column prop="templateUpdateTime" label="更新时间">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="todomaindetail(scope.row)" type="text" size="small">详情</el-button>
                <el-button @click="changeVersion(scope.row)" type="text" size="small">切换版本</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="formData.pageSize"
            :current-page="formData.pageNum"
            @current-change="SetPage"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="版本切换" :visible.sync="dialogTableVisible" width="26%">
      <el-table :data="domainHistoryData" style="margin-bottom: 20px">
        <el-table-column property="templateVersion" label="版本号"></el-table-column>
        <el-table-column property="templateUpdateTime" label="更新时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="chooseVersion(scope.row)" size="small">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="histotal"
        :page-size="historyformData.pageSize"
        :current-page="historyformData.pageNum"
        @current-change="SetPageHistory"
        @size-change="handleSizeChangeHistory"
      ></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import { getPageDomainList, getAppList, changeTemplateData } from "@/api/basisMG";
export default {
  data() {
    return {
      dialogTableVisible: false,
      formData: {
        appitemId: "",
        templateId: "",
        domainName: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      domainListData: [],
      domainHistoryData: [],
      appformData: {
        type: "",
        name: "",
        pageSize: 10,
        pageNum: 1,
      },
      historyformData: {
        appitemId: "",
        templateId: "",
        domainName: "",
        pageNum: 1,
        pageSize: 10,
      },
      histotal: 0,
      tabsList: [],
      changeformdata: {
        appitemId: "",
        domain: "",
        templateDataId: "",
        platName: "",
      },
    };
  },
  methods: {
    // 分页
    SetPage(e) {
      this.formData.pageNum = e;
      this.getPageDomainList();
    },
    handleSizeChange (val) {
      this.formData.pageSize = val;
      this.getPageDomainList();
    },
    // 分页
    SetPageHistory(e) {
      this.historyformData.pageNum = e;
      this.getHistoryDomainList();
    },
    handleSizeChangeHistory(val) {
      this.historyformData.pageSize = val;
      this.getHistoryDomainList();
    },
    searchDomain() {
      this.getPageDomainList();
    },
    handleClick(tab) {
      this.formData.appitemId = tab.name;
      this.getPageDomainList();
    },
    async getAppList() {
      const res = await getAppList(this.appformData);
      this.tabsList = res.data.content;
      this.formData.appitemId = this.tabsList[0].id;
      this.getPageDomainList();
    },
    todomaindetail(row) {
      this.$router.push({ path: "./domainMore", query: { templateId: row.templateId } });
    },
    changeVersion(e) {
      this.dialogTableVisible = true;
      this.historyformData.appitemId = e.appitemId;
      this.historyformData.templateId = e.templateId;
      this.historyformData.domainName = e.domainName;
      this.getHistoryDomainList();
    },
    async getHistoryDomainList() {
      const res = await getPageDomainList(this.historyformData);
      this.domainHistoryData = res.data.content;
      this.histotal = res.data.total;
    },
    chooseVersion(e) {
      this.$confirm("确定要回退吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.changeformdata.appitemId = e.appitemId;
          this.changeformdata.domain = e.domainName;
          this.changeformdata.templateDataId = e.templateDataId;
          this.changeformdata.platName = e.platName;
          const data = await changeTemplateData(this.changeformdata);
          if (data.code != 200) return this.$message.error("操作失败请稍后重试");
          this.$message({
            type: "success",
            message: "版本切换成功!",
          });
          this.getPageDomainList();
          this.dialogTableVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "版本切换失败！",
          });
          this.dialogTableVisible = false;
        });
    },
    async getPageDomainList() {
      this.formData.isDelete = 0;
      const res = await getPageDomainList(this.formData);
      this.domainListData = res.data.content;
      this.total = res.data.total;
    },
  },
  created() {
    this.getAppList();
  },
};
</script>
<style lang="scss">
.domainlist {
  .searchbox {
    width: 80%;
    margin: 20px auto;
  }
}
</style>
